<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        ul {
            list-style: none
        }
        
        * {
            margin: 0;
            padding: 0;
        }
        
        div {
            width: 1150px;
            height: 400px;
            margin: 50px auto;
            border: 1px solid red;
            overflow: hidden;
        }
        
        div li {
            width: 240px;
            height: 400px;
            float: left;
            background-image: url(images/1.jpg);
        }
        
        div ul {
            width: 1300px;
        }
        
        li:nth-child(1) {
            background-color: rgb(158, 126, 126);
        }
        
        li:nth-child(2) {
            background-color: rgb(73, 36, 36);
        }
        
        li:nth-child(3) {
            background-color: rgb(189, 70, 70);
        }
        
        li:nth-child(4) {
            background-color: rgb(240, 61, 61);
        }
        
        li:nth-child(5) {
            background-color: rgb(71, 17, 17);
        }
    </style>
</head>

<body>
    <div id="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        //获取元素
        var box = document.getElementById("box");
        var ul = box.children[0];
        var lis = ul.children;
        //2.动态添加背景图
        for (var i = 0; i < lis.length; i++) {
            lis[i].style.backgroundImage = "url(images/" + (i + 1) + ".jpg)";
            //鼠标经过当前li 当前li的宽度变成800，其他li宽度都变为100
            lis[i].onmouseover = function() {
                //干掉所有人 其他li宽度都变为100 而且是动画的形式
                for (var j = 0; j < lis.length; j++) {
                    animate(lis[j], {
                        "width": 100
                    });
                }
                //留下我自己 当前的li宽度为800
                animate(this, {
                    "width": 800
                });
            }

        }
        //3.离开box之后 所有li宽度都要变回240
        box.onmouseout = function() {
            for (var i = 0; i < lis.length; i++) {
                animate(lis[i], {
                    "width": 240
                });
            }
        }

        function animate(obj, json) { //json格式{属性名：属性值} {attr:target}
            clearInterval(obj.timer); //防止重复设置定时器
            obj.timer = setInterval(function() {
                var flag = true; //假设这一次执行完之后，所有的属性都能到达目标
                for (var k in json) {
                    var leader = parseInt(getStyle(obj, k)) || 0; //获取任意样式的属性 100px
                    var target = json[k];
                    var step = (target - leader) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    leader = leader + step;
                    obj.style[k] = leader + "px";
                    if (leader !== target) { //当前这个属性还没有到达目标值
                        flag = false;
                    }
                }
                if (flag) { //如果次吃仍然是true 说明所有的属性都到达目标
                    clearInterval(obj.timer);
                }
            }, 15)
        }

        function getStyle(obj, attr) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(obj, null)[attr];
            } else {
                return obj.currentStyle[attr];
            }
        }
    </script>
</body>

</html>